Below is the source code for example.cfm
<!--- default params --->
<cfparam name="form.fontface" default="sans-serif">
<cfparam name="form.fontsize" default="8">
<cfparam name="form.fontcolor" default="999999">
<cfparam name="form.fontcolor_over" default="ff0000">
<cfparam name="form.fontcolor_selected" default="000000">
<cfparam name="form.fontstyle" default="normal">
<cfparam name="form.bgcolor" default="ffffff">
<cfparam name="form.border" default="1">
<cfparam name="form.bordercolor" default="999999">
<cfparam name="form.tabcolor" default="ccccff">
<cfparam name="form.tabcolor_over" default="ffff00">
<cfparam name="form.padding" default="0">
<cfparam name="form.spacing" default="0">
<cfparam name="form.heightadj_ie" default="0">
<cfparam name="form.heightadj_ff" default="2">
<cfparam name="form.LiftActiveTab" default="true">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CF_Tab Example</title>
<style type="text/css">
.textfield { font-family: "MS Sans Serif"; font-size: 9pt; border: 1px solid #cccccc; }
.button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #000000; cursor: hand}
.tablestandard { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
</style>
</head>
<body>
<cfoutput>
<cfform action="example.cfm" method="POST">
<h2>CF_Tab Example</h1>
<table border="0" cellpadding="10">
<tr>
<!--- custom appearance --->
<td valign="top" nowrap class="tablestandard">
<strong>Text based tabs. Customize tab appearance:</strong><br>
<table border="0" cellpadding="2" cellspacing="2" class="tablestandard">
<tr>
<td>Font face</td>
<td><cfinput type="Text" name="fontface" class="textfield" value="#form.fontface#" size="20"></td>
</tr>
<tr>
<td>Font size</td>
<td><cfinput type="Text" name="fontsize" class="textfield" value="#form.fontsize#" validate="integer" size="4"></td>
</tr>
<tr>
<td>Font color</td>
<td><cfinput type="Text" name="fontcolor" class="textfield" value="#form.fontcolor#" size="8"></td>
</tr>
<tr>
<td>Font color<br>mouse over</td>
<td><cfinput type="Text" name="fontcolor_over" class="textfield" value="#form.fontcolor_over#" size="8"></td>
</tr>
<tr>
<td>Font color<br>selected tab</td>
<td><cfinput type="Text" name="fontcolor_selected" class="textfield" value="#form.fontcolor_selected#" size="8"></td>
</tr>
<tr>
<td>Font style</td>
<td>
<select class="textfield" name="fontstyle">
<option value="normal" #iif(form.fontstyle is "normal",de("selected"),de(""))#>Normal</option>
<option value="italic" #iif(form.fontstyle is "italic",de("selected"),de(""))#>Italic</option>
<option value="bold" #iif(form.fontstyle is "bold",de("selected"),de(""))#>Bold</option>
</select>
</td>
</tr>
<tr><td colspan="2"><hr size="1"></td></tr>
<tr>
<td>Padding</td>
<td><cfinput type="Text" name="padding" class="textfield" value="#form.padding#" validate="integer" size="4"></td>
</tr>
<tr>
<td>Spacing</td>
<td><cfinput type="Text" name="spacing" class="textfield" value="#form.spacing#" validate="integer" size="4"></td>
</tr>
<tr><td colspan="2"><hr size="1"></td></tr>
<tr>
<td>Background color</td>
<td><cfinput type="Text" name="bgcolor" class="textfield" value="#form.bgcolor#" size="8"></td>
</tr>
<tr>
<td>Border color</td>
<td><cfinput type="Text" name="bordercolor" class="textfield" value="#form.bordercolor#" size="8"></td>
</tr>
<tr>
<td>Border</td>
<td><cfinput type="Text" name="border" class="textfield" value="#form.border#" validate="integer" size="4"></td>
</tr>
<tr><td colspan="2"><hr size="1"></td></tr>
<tr>
<td>Height Adj<br>Internet Explorer</td>
<td><cfinput type="Text" name="heightadj_ie" class="textfield" value="#form.heightadj_ie#" validate="integer" size="4"></td>
</tr>
<tr>
<td>Height Adj<br>Firefox</td>
<td><cfinput type="Text" name="heightadj_f" class="textfield" value="#form.heightadj_ff#" validate="integer" size="4"></td>
</tr>
<tr><td colspan="2"><hr size="1"></td></tr>
<tr>
<td>Lift active tab</td>
<td>
<select class="textfield" name="LiftActiveTab">
<option value="true" #iif(form.LiftActiveTab is "true",de("selected"),de(""))#>Yes</option>
<option value="false" #iif(form.LiftActiveTab is "false",de("selected"),de(""))#>No</option>
</select>
</td>
</tr>
</table>
</td>
<!--- SHOW TAB --->
<td valign="top" class="tablestandard">
<CF_TAB name="tabSample" width="650" height="200"
fontface="#form.fontface#" fontsize="#form.fontsize#"
fontcolor="#form.fontcolor#" fontcolor_over="#form.fontcolor_over#" fontcolor_selected="#form.fontcolor_selected#"
fontstyle="#form.fontstyle#" fontstyle_over="#form.fontstyle#" fontstyle_selected="#form.fontstyle#"
bgcolor="#form.bgcolor#"
border="#form.border#" bordercolor="#form.bordercolor#"
tabcolor="#form.tabcolor#" tabcolor_over="#form.tabcolor_over#"
padding="#form.padding#" spacing="#form.spacing#"
heightadj_ie="#form.heightadj_ie#" heightadj_ff="#form.heightadj_ff#"
LiftActiveTab="#form.LiftActiveTab#">
<CF_TABITEM name="Tab1" label="My 1st Tab" icon="images/features.gif">
This is the <strong>content</strong> of first tab.<br>
Content can be any HTML. For example image below:<br>
<img src="http://www.masrizal.com/images/coldfusionmx.gif" alt="ColdFusion MX Master">
</CF_TABITEM>
<CF_TABITEM name="Tab2" label="My 2nd Tab" icon="images/usage.gif">
This is the <strong>content</strong> of 2nd tab.<br>
You can put any HTML here, even Javascript code.<br><br>
Try clicking button below to enable/disable the 3rd tab<br>
<cfsavecontent variable="strJS">
javascript:
{
if (!IsCFTabActive('Tab3'))
CFTab_Activate('Tab3');
else
CFTab_Deactivate('Tab3');
}
</cfsavecontent>
<input type="Button" onclick="#strJS#" value="Enable/Disable 3rd Tab">
</CF_TABITEM>
<CF_TABITEM name="Tab3" label="3rd Tab. Default is disabled" icon="images/usage.gif" active="0">
This is the <strong>content</strong> of 3rd tab.<br><br>
</CF_TABITEM>
<CF_TABITEM name="TabYahoo" label="Yahoo" icon="images/requirements.gif" ContentURL="http://www.yahoo.com"/>
<CF_TABITEM name="TabRedirect" label="Redirect to Google..." icon="images/example.gif" ClickURL="http://www.google.com"/>
</CF_TAB>
<hr size="1">
<strong>Notes:</strong><br>
<li>
Height adjustments are number of pixel each tab header must be adjusted to remove unwanted pixel at the bottom of each tab headers.<br>
These numbers may vary depends on selected font size and/or any icon used.<br>
Also these numbers is browser dependent. That's why we provide both heightadj_ie and heightadj_ff for Internet Explorer and Mozilla Firefox based browsers.
</li>
<li>
LiftActiveTab is used to set whether currently selected tab needs to be lifted 1 pixel up or not
</li>
<br><br>
<a href="viewsource.cfm?source=example.cfm" target="source">View source of this file</a>
<a href="example_image.cfm">View sample of tabs built using images</a>
<a href="example_menu.cfm">View sample of tabs used as a menu</a>
</td>
</tr>
</table>
<input class="button" type="Submit" value="Update Appearance">
</cfform>
</cfoutput>
</body>
</html>